<!--
 * @Descripttion: 图标选择器组件
 * @version: 1.3
 * @Author: rookie
 * @Date: 2023年1月6日09:02:46
-->
<template>
  <div class="net-icon-select">
    <el-input
      v-model="data.defaultValue"
      :prefix-icon="data.defaultValue || 'none'"
      :placeholder="placeholder"
      :clearable="clearable"
      :disabled="disabled"
    >
      <template #append>
        <el-button icon="el-icon-more-filled" @click="open"></el-button>
      </template>
    </el-input>
    <el-dialog
      title="图标选择器"
      v-model="data.dialogVisible"
      :width="780"
      destroy-on-close
    >
      <el-tabs style="margin-top: -30px">
        <el-tab-pane v-for="item in data.data" :key="item.name" lazy>
          <template #label>
            {{ item.name }}
            <el-tag size="small" type="info">{{ item.icons.length }}</el-tag>
          </template>
          <div class="net-icon-select__list">
            <el-scrollbar>
              <ul @click="selectIcon">
                <li v-for="icon in item.icons" :key="icon">
                  <span :data-icon="icon"></span>
                  <el-icon><component :is="icon" /></el-icon>
                </li>
              </ul>
            </el-scrollbar>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import config from '@/config/iconSelect';

import { reactive, watch, onMounted } from 'vue';

/**
 * 父子组件传值
 */
let prop = defineProps({
  modelValue: { type: String, default: '' },
  placeholder: { type: String, default: '请输入或者选择图标' },
  clearable: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
});
let data: any = reactive({
  defaultValue: '',
  dialogVisible: false,
  data: [],
});
let emit: any = defineEmits();
watch([() => prop.modelValue], ([modelValue]) => {
  data.defaultValue = modelValue;
  emit('update:modelValue', modelValue);
});
const open = () => {
  if (data.disabled) {
    return false;
  }
  data.dialogVisible = true;
};
const selectIcon = (e: any) => {
  if (e.target.tagName != 'SPAN') {
    return false;
  }
  data.defaultValue = e.target.dataset.icon;
  data.dialogVisible = false;
};
onMounted(() => {
  data.defaultValue = data.modelValue;
  data.data.push(...config.icons);
});
</script>
<style scoped>
.net-icon-select {
  display: inline-block;
}
.net-icon-select__list {
  height: 360px;
  overflow: auto;
}
.net-icon-select__list li {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 5px;
  vertical-align: top;
  box-shadow: 0 0 0 1px #eee;
  transition: all 0.1s;
  border-radius: 4px;
  position: relative;
}
.net-icon-select__list li span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  cursor: pointer;
}
.net-icon-select__list li i {
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size: 26px;
  color: #6d7882;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
.net-icon-select__list li:hover {
  box-shadow: 0 0 1px 4px rgba(64, 158, 255, 1);
}
.net-icon-select__list li:hover i {
  color: #409eff;
}
</style>
